<template>
  <div class="app-container">
    <div class="page-header">
      <h1>系统接口</h1>
      <p>基于Swagger的API文档管理</p>
    </div>
    
    <el-row :gutter="20" class="swagger-info">
      <el-col :span="8">
        <el-card class="info-card">
          <div class="card-content">
            <div class="card-icon">
              <svg-icon icon-class="swagger" />
            </div>
            <div class="card-info">
              <h3>API总数</h3>
              <p class="card-value">156</p>
              <p class="card-desc">个接口</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card class="info-card">
          <div class="card-content">
            <div class="card-icon">
              <svg-icon icon-class="component" />
            </div>
            <div class="card-info">
              <h3>模块数量</h3>
              <p class="card-value">12</p>
              <p class="card-desc">个模块</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card class="info-card">
          <div class="card-content">
            <div class="card-icon">
              <svg-icon icon-class="documentation" />
            </div>
            <div class="card-info">
              <h3>文档版本</h3>
              <p class="card-value">v2.0</p>
              <p class="card-desc">最新版本</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="swagger-content">
      <el-col :span="6">
        <el-card class="module-panel">
          <template #header>
            <span>API模块</span>
          </template>
          <el-tree
            :data="moduleList"
            :props="{ label: 'name', children: 'children' }"
            node-key="id"
            default-expand-all
            @node-click="handleNodeClick"
          >
            <template #default="{ data }">
              <div class="tree-node">
                <svg-icon :icon-class="data.icon" />
                <span>{{ data.name }}</span>
                <el-tag v-if="data.count" size="small" type="info">{{ data.count }}</el-tag>
              </div>
            </template>
          </el-tree>
        </el-card>
      </el-col>
      
      <el-col :span="18">
        <el-card class="api-panel">
          <template #header>
            <div class="panel-header">
              <span>接口列表</span>
              <div class="header-actions">
                <el-button type="primary" size="small" icon="View">在线文档</el-button>
                <el-button type="success" size="small" icon="Download">导出文档</el-button>
              </div>
            </div>
          </template>
          
          <el-table :data="apiList" style="width: 100%">
            <el-table-column prop="name" label="接口名称" width="200" />
            <el-table-column prop="method" label="请求方式" width="100">
              <template #default="scope">
                <el-tag :type="getMethodType(scope.row.method)">
                  {{ scope.row.method }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="path" label="请求路径" />
            <el-table-column prop="description" label="接口描述" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="scope.row.status === '已发布' ? 'success' : 'warning'">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="operation" label="操作" width="150">
              <template #default>
                <el-button size="small" type="primary">查看</el-button>
                <el-button size="small" type="success">测试</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row class="swagger-actions">
      <el-col :span="24">
        <el-card>
          <div class="action-buttons">
            <el-button type="primary" icon="Refresh">刷新接口</el-button>
            <el-button type="success" icon="Upload">同步接口</el-button>
            <el-button type="warning" icon="Setting">接口配置</el-button>
            <el-button type="info" icon="Document">生成文档</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const moduleList = ref([
  {
    id: 1,
    name: '系统管理',
    icon: 'system',
    count: 25,
    children: [
      { id: 11, name: '用户管理', icon: 'user', count: 8 },
      { id: 12, name: '角色管理', icon: 'peoples', count: 6 },
      { id: 13, name: '菜单管理', icon: 'tree-table', count: 5 },
      { id: 14, name: '部门管理', icon: 'tree', count: 6 }
    ]
  },
  {
    id: 2,
    name: '监控管理',
    icon: 'monitor',
    count: 18,
    children: [
      { id: 21, name: '在线用户', icon: 'online', count: 4 },
      { id: 22, name: '定时任务', icon: 'job', count: 6 },
      { id: 23, name: '数据监控', icon: 'druid', count: 4 },
      { id: 24, name: '服务监控', icon: 'server', count: 4 }
    ]
  },
  {
    id: 3,
    name: '系统工具',
    icon: 'tool',
    count: 12,
    children: [
      { id: 31, name: '表单构建', icon: 'build', count: 4 },
      { id: 32, name: '代码生成', icon: 'code', count: 5 },
      { id: 33, name: '系统接口', icon: 'swagger', count: 3 }
    ]
  }
])

const apiList = ref([
  {
    name: '获取用户列表',
    method: 'GET',
    path: '/system/user/list',
    description: '分页查询用户信息',
    status: '已发布'
  },
  {
    name: '新增用户',
    method: 'POST',
    path: '/system/user',
    description: '新增用户信息',
    status: '已发布'
  },
  {
    name: '修改用户',
    method: 'PUT',
    path: '/system/user',
    description: '修改用户信息',
    status: '已发布'
  },
  {
    name: '删除用户',
    method: 'DELETE',
    path: '/system/user/{userId}',
    description: '删除用户信息',
    status: '已发布'
  }
])

const getMethodType = (method) => {
  const typeMap = {
    'GET': 'success',
    'POST': 'primary',
    'PUT': 'warning',
    'DELETE': 'danger'
  }
  return typeMap[method] || 'info'
}

const handleNodeClick = (data) => {
  console.log('选中模块:', data)
}
</script>

<style lang="scss" scoped>
.page-header {
  margin-bottom: 20px;
  
  h1 {
    color: #303133;
    margin: 0 0 8px 0;
  }
  
  p {
    color: #606266;
    margin: 0;
  }
}

.swagger-info {
  margin-bottom: 20px;
}

.info-card {
  .card-content {
    display: flex;
    align-items: center;
    gap: 16px;
    
    .card-icon {
      font-size: 32px;
      color: #409eff;
    }
    
    .card-info {
      flex: 1;
      
      h3 {
        margin: 0 0 8px 0;
        color: #303133;
        font-size: 14px;
      }
      
      .card-value {
        margin: 0 0 4px 0;
        font-size: 24px;
        font-weight: bold;
        color: #303133;
      }
      
      .card-desc {
        margin: 0;
        font-size: 12px;
        color: #909399;
      }
    }
  }
}

.swagger-content {
  margin-bottom: 20px;
}

.module-panel {
  .tree-node {
    display: flex;
    align-items: center;
    gap: 8px;
    
    .svg-icon {
      color: #606266;
    }
    
    span {
      flex: 1;
      font-size: 14px;
    }
  }
}

.api-panel {
  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .header-actions {
      display: flex;
      gap: 8px;
    }
  }
}

.swagger-actions {
  .action-buttons {
    display: flex;
    gap: 12px;
  }
}
</style>